{% extends 'base.html' %}

{% block css%}
<style type="text/css">

</style>
{% endblock %}

{% block body%}
<div class="row" class='container-fluid'>
	<div class="col-md-8">
		<table class="table" width="100%">
			<tr>
				<td>

					<div class="form-group form-horizontal">
						<!-- <textarea id="debug_info" readonly rows="25" style="background-color:#FFFFCC; color:#000000" class="form-control"></textarea> -->
						<textarea id="debug_info" readonly rows="25" class="form-control"></textarea>
					</div>


					<div class="form-group form-horizontal">
						<input type="text" id="cmd_str" placeholder="input command and enter..."
							style="height:40px;font-size:24px" class="form-control">
					</div>

				</td>
			</tr>
		</table>
	</div>

	<div>
		<div class="col-md-4">
			<table class="table" width="100%">
				<tr>
					<td>
						<a href="#" id="btn_clear">
							Clear screen
						</a>
					</td>
				</tr>
				<tr>
					<td>
						<a href="#" id="get_help_info">
							Help ...
						</a>
					</td>
				</tr>
			</table>
		</div>

	</div>

	<div class="modal" tabindex="-1" role="dialog" id="myModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Command Set</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<table class="table table-hover table-striped table-condensed" width="100%">
						<tr style="font-size:12px">
							<td>linux shell </td>
							<td> Jump to Linux command prompt from DIAG </td>
						</tr>

						<tr style="font-size:12px">
							<td>run brcm </td>
							<td> Jump to Broadcom shell command prompt from DIAG</td>
						</tr>
						<tr style="font-size:12px">
							<td>exit </td>
							<td> back to DIAG/Linux</td>
						</tr>
						<tr style="font-size:12px">
							<td>reboot </td>
							<td> Swtich Reset</td>
						</tr>
					</table>
				</div>

			</div>
		</div>
	</div>
	{% endblock %}

	{% block js%}
	{{ super() }}
	<script type="text/javascript">
		// function handle_console1_init() {
		// 	url = "/api/handle_console1_init";
		// 	$.get(url, function(data, status) {
		// 		console.log(data);
		// 		$("#debug_info").append(data + "\n");
		// 	});
		// }

		$(document).ready(function () {
			// handle_console1_init();

			$("#btn_clear").click(function () {
				$("#debug_info").html("");
			});

			$("#get_help_info").click(function () {
				$("#myModal").modal();
			});

			$(document).keyup(function (event) {
				if (event.keyCode == 13) {
					// $("#submit").trigger("click");
					cmd_str = $("#cmd_str").val();

					if (cmd_str == "cls" || cmd_str == "CLS") {
						$("#debug_info").html("");
						return false;
					}

					$.post(
						"/api/handle_console1",
						{
							cmd_str: cmd_str
						},
						function (data, status) {
							// console.log("data: " + data);
							$("#debug_info").append(data + "\n");

							var psconsole = $('#debug_info');
							if (psconsole.length)
								psconsole.scrollTop(psconsole[0].scrollHeight - psconsole.height());

						}
					);
				}

				//27 = Escape Escape
				if (event.keyCode == 27) {
					$("#cmd_str").val('');
				}


			});


			$("#btn_set_debug_cmd").click(function () {
				cmd_str = $("#cmd_str").val()

				// $.post(

				// 	"/api/handle_console1",
				// 	{
				// 		cmd_str: cmd_str
				// 	},
				// 	function(data, status) {
				// 		// console.log("data: " + data);
				// 		$("#debug_info").append(data + "\n");
				// 	}
				// );

				$.ajax({
					url: "/api/handle_console1",
					data: { cmd_str: cmd_str },
					cache: false,
					async: false,
					type: "POST",
					//    dataType : 'json/xml/html',
					success: function (data) {
						$("#debug_info").append(data + "\n");
					}
				});


			})
		});

	</script>
	{% endblock %}